<template>
  <div class="admin-page">
    <el-container style="height: 100vh;">
      <!-- 左侧导航 -->
      <el-aside width="220px">
        <el-menu
          :default-active="currentMenu"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
          <el-menu-item index="user-manage">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="tag-manage">
            <i class="el-icon-price-tag"></i>
            <span>标签管理</span>
          </el-menu-item>
          <el-menu-item index="article-manage">
            <i class="el-icon-document"></i>
            <span>文章管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main>
        <component :is="currentView" />
      </el-main>
    </el-container>

    <!-- 返回首页按钮 -->
    <el-button
      class="back-home-btn"
      type="primary"
      size="large"
      @click="goHome"
    >
      返回首页
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, ref } from 'vue'
import { useRouter } from 'vue-router'
import UserManage from '@/components/admin/UserManage.vue'
import TagManage from '@/components/admin/TagManage.vue'
import ArticleManage from '@/components/admin/ArticleManage.vue'

const router = useRouter()

const currentMenu = ref('user-manage')
const currentView = shallowRef(UserManage)

const views = {
  'user-manage': UserManage,
  'tag-manage': TagManage,
  'article-manage': ArticleManage,
}

function handleSelect(index: string) {
  const key = index as keyof typeof views
  if (views[key]) {
    currentMenu.value = key
    currentView.value = views[key]
  }
}

function goHome() {
  router.push('/')
}
</script>

<style scoped>
.admin-page {
  font-family: sans-serif;
}

.back-home-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
</style>
